<template>
  <view class="page">
    <scroll-view style="height: 100%" scroll-y="true" lower-threshold="100px" @scrolltolower="getList">
      <view class="orderList">
        <view class="title">
          历史订单
        </view>
        <view class="orderItem" v-for="(item, index) in orderList" :key="index">
          <view class="orderTitle" @click="toDetail(item)">
            <view class="smallFont">
              订单编号: {{ item.orderId }}
            </view>
            <view class="orderStatus">
              订单{{ valueOf(item.orderStatus).chineseName }}
            </view>
          </view>
          <view class="orderContent" @click="toDetail(item)">
            <view class="left">
              <view class="image">
                <image :src="item.performanceCoverUrl" class="imagerUrl"></image>
              </view>

            </view>
            <view class="right">
              <view class="title">
                {{ item.performanceTitle }}
              </view>
              <view class="smallFont">
                时间： <span style="font-size: 13px;">{{ formatDateTime2WeekDate(item.showTime) }}</span>
              </view>
              <view class="smallFont">
                地点：{{ item.venueLocation }}
              </view>
              <view class="smallFont">
                数量：{{ item.ticketCount }}张
              </view>
              <view class="smallFont">
                总计：{{ item.payAmount }}元
              </view>
            </view>
          </view>
          <!--  只有待支付状态才有 -->
          <view v-if="item.orderStatus === 0" class="orderBottom">
            <view class="btnGroup">
              <button class="btn" style="color:#FF3D71;border-color:#FF3D71" plain @click="openPay(item)">
                立即支付
              </button>
              <button style="border-color:rgb(217,217,217); color:rgb(115,115,115)" class="btn" plain
                      @click="openCancel(item)">
                取消订单
              </button>
            </view>
          </view>
          <view v-if="item.orderStatus === 2" class="orderBottom">
            <view class="btnGroup">
              <view class="icon" @click="openEwm(item.orderId)">
                <image src="../../static/icons/ewm.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <uni-popup ref="warning" type="dialog">
        <uni-popup-dialog cancelText="取消" confirmText="确定" title="订单支付提醒"
                          :content="'是否支付【'+payItem.payAmount+'元】'"
                          @confirm="doPay"></uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="cancelWarning" type="dialog">
        <uni-popup-dialog cancelText="取消" confirmText="确定" title="订单取消提醒"
                          :content="'是否取消订单:' + cancelItem.orderId"
                          @confirm="doCancel"></uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="QR" type="dialog">
        <uv-qrcode ref="qrcode" canvas-id="qrcode" :value="QRValue" size="300rpx" :loading="loading"
                   :options="options"></uv-qrcode>
      </uni-popup>
    </scroll-view>
  </view>
</template>

<script>
import concertList from "../../uni_modules/uni-badge/components/concert-list/concert-list.vue";
import {cancelOrder, getOrderList, payTicketOrder} from "../../api/user/order";
import {valueOf} from "../../utils/OrderStatusUtil";
import {formatDateTime2WeekDate} from "../../utils/DateUtils";
import UvQrcode from "../../uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue";

export default {
  components: {UvQrcode, concertList},
  data() {
    return {
      orderList: [],
      hasMore: true,
      loading: false,
      condition: {
        pageNum: 1,
        pageSize: 5,
      },
      payItem: {},
      cancelItem: {},
      options: {
        useDynamicSize: false,
        errorCorrectLevel: 'Q',
        margin: 10,
        areaColor: "#fff",
      },
      QRValue: 'null',
    }
  },
  onShow() {
    this.orderList = [];
    this.hasMore = true;
    this.loading = false;
    this.condition = {
      pageNum: 1,
      pageSize: 5,
    }
    this.getList();
  },
  methods: {
    formatDateTime2WeekDate,
    valueOf,
    getList() {
      if (!this.hasMore) return;
      this.loading = true;
      getOrderList(this.condition).then(res => {
        this.orderList = [...this.orderList, ...res.data.rows]
        this.hasMore = this.condition.pageNum * this.condition.pageSize <= res.data.total;
        ++this.condition.pageNum;
        this.loading = false;
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/subpkg/order-info/order-info?orderId=${item.orderId}`,
      });
    },
    openPay(item) {
      this.payItem = item;
      this.$refs.warning.open();
    },
    openCancel(item) {
      this.cancelItem = item;
      this.$refs.cancelWarning.open();
    },
    openEwm(orderId) {
      this.QRValue = orderId;
      this.$refs.QR.open();
    },
    doPay() {
      payTicketOrder(this.payItem.payOrderId).then(res => {
        if (res.success) {
          wx.showToast({
            title: '支付成功！',
            icon: "success",
            duration: 2000,
          });
          this.payItem.orderStatus = 2;
        }
      })
    },
    doCancel() {
      cancelOrder(this.cancelItem.orderId).then(res => {
        if (res.success) {
          wx.showToast({title: '取消成功！', icon: "success", duration: 2000,});
          this.cancelItem.orderStatus = 1;
        }
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  height: 100%;
}

.orderList {
  padding: 20px;

  .title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
  }

  .orderItem {
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(224, 224, 225, 0.78);;

    .orderTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .orderStatus {
        font-size: 14px;
        color: #FF3D71;
      }
    }

    .orderContent {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;


      .left {
        width: 30%;
        margin-right: 5px;

        .image {
          width: 100%;
          height: 240rpx;
          overflow: hidden;

          .imagerUrl {
            width: 100%;
            height: 100%;
          }
        }
      }

      .right {
        height: 100%;
        width: 65%;

        .title {
          width: 100%;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 隐藏溢出部分 */
          text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
          display: inline-block; /* 使其在一行内显示 */
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
        }
      }
    }

    .orderBottom {
      margin-bottom: 10px;

      .btnGroup {
        text-align: right;

        .btn {
          display: inline-block;
          border-radius: 24px;
          width: 80px;
          margin-right: 15px;
          font-size: 12px;
        }

        .icon {
          width: 32rpx;
          height: 32rpx;
          display: inline-block;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }


    }

    .smallFont {
      font-size: 14px;
      color: #95949D;
      margin-bottom: 3px;
    }

  }

}
</style>
